<template>
	<div class="UserList">
		<el-main>
			<p class="title"> 用户管理</p>
			<el-table
					:data="list"
					stripe
					style="width: 100%">
				<el-table-column
						prop="id"
						label="ID"
						width="180">
				</el-table-column>
				<el-table-column
						prop="username"
						label="用户名"
						width="180">
				</el-table-column>
				<el-table-column
						prop="email"
						label="邮箱">
				</el-table-column>
				<el-table-column
						prop="phone"
						label="电话">
				</el-table-column>
				<el-table-column prop="createTime" label="注册时间">
					<template slot-scope="scope">
<!--						{{ scope.row.createTime | ProductDate}}-->
						{{ new Date(scope.row.createTime).toLocaleString() }}
					</template>
				</el-table-column>
			</el-table>
			<!--        分页器-->
			<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:page-size="pagesize"
					:total="total">
			</el-pagination>
		</el-main>
	</div>
</template>

<script>
	import { userList,user} from "./../../api/index.js";
	export default {
		name: "UserList",
		data(){
			return{
				list:[],
				total:0,
				createtime:"",
				pagesize: 10,
				currpage: 1,
			}
		},
		mounted() {
			this.BeforeMethod()
		},
		methods:{
			async BeforeMethod() {
				const res = await userList();
				this.list= res.data.list;
				this.total = res.data.total;
			},
			handleCurrentChange(cpage) {
				this.currpage = cpage;
				user(this.currpage).then(res => {
					this.list = res.data.list;
				});
			},
			handleSizeChange(val) {
				this.pagesize = val;
			},
		},
		watch:{
			list: {
				handler(val) {
					this.list=val
				},
				deep: true
			}
		},
	}
</script>

<style lang="scss" scoped>

</style>
